<template>
	<div id="userLayout">
		<div class="login_panle">
			<div class="login_panle_form">
				<div class="login_panle_form_title">
					<img class="login_panle_form_title_logo" :src="$GIN_VUE_ADMIN.appLogo" alt>
					<p class="login_panle_form_title_p">{{ $GIN_VUE_ADMIN.appName }}</p>
				</div>
				<el-form ref="loginForm" :model="loginFormData" :rules="rules" @keyup.enter="submitForm">
					<el-form-item prop="username">
						<el-input v-model="loginFormData.username" clearable placeholder="请输入用户名">
							<template #suffix>
								<span class="input-icon">
									<el-icon>
										<user />
									</el-icon>
								</span>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input v-model="loginFormData.password" clearable :type="lock === 'lock' ? 'password' : 'text'"
							placeholder="请输入密码">
							<template #suffix>
								<span class="input-icon">
									<el-icon>
										<component :is="lock" @click="changeLock" />
									</el-icon>
								</span>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="captcha">
						<div class="vPicBox">
							<el-input v-model="loginFormData.captcha" clearable placeholder="请输入验证码" style="width: 60%" />
							<div class="vPic">
								<img v-if="picPath" :src="picPath" alt="请输入验证码" @click="loginVerify()">
							</div>
						</div>
					</el-form-item>
					<el-form-item>
						<!-- <el-button
              type="primary"
              style="width: 46%"
              size="large"
              @click="checkInit"
            >前往初始化</el-button> -->
						<el-button type="primary" size="large" style="width: 46%; margin-left: 8%" @click="submitForm">登
							录</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="login_panle_right" />
			<div class="login_panle_foot">
				<!-- <div class="copyright">
          <bootomInfo />
        </div> -->
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Login',
	}
</script>

<script setup>
	import {
		captcha
	} from '@/api/user'
	import {
		checkDB
	} from '@/api/initdb'
	import bootomInfo from '@/view/layout/bottomInfo/bottomInfo.vue'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		useRouter
	} from 'vue-router'
	import {
		useUserStore
	} from '@/pinia/modules/user'
	const router = useRouter()
	// 验证函数
	const checkUsername = (rule, value, callback) => {
		if (value.length < 2) {
			return callback(new Error('请输入正确的用户名'))
		} else {
			callback()
		}
	}
	const checkPassword = (rule, value, callback) => {
		if (value.length < 6) {
			return callback(new Error('请输入正确的密码'))
		} else {
			callback()
		}
	}

	// 获取验证码
	const loginVerify = () => {
		captcha({}).then((ele) => {
			rules.captcha[1].max = ele.data.captchaLength
			rules.captcha[1].min = ele.data.captchaLength
			picPath.value = ele.data.picPath
			loginFormData.captchaId = ele.data.captchaId
		})
	}
	loginVerify()

	// 登录相关操作
	const lock = ref('lock')
	const changeLock = () => {
		lock.value = lock.value === 'lock' ? 'unlock' : 'lock'
	}
	
	const loginForm = ref(null)
	const picPath = ref('')
	const loginFormData = reactive({
		type: 1,
		username: import.meta.env.VITE_USER_NAME,
		password: import.meta.env.VITE_PASSWORD,
		captcha: '',
		captchaId: '',
	})
	const rules = reactive({
		username: [{
			validator: checkUsername,
			trigger: 'blur'
		}],
		password: [{
			validator: checkPassword,
			trigger: 'blur'
		}],
		captcha: [{
				required: true,
				message: '请输入验证码',
				trigger: 'blur'
			},
			{
				message: '验证码格式不正确',
				trigger: 'blur',
			},
		],
	})

	const userStore = useUserStore()
	const login = async () => {
		return await userStore.LoginIn(loginFormData)
	}
	const submitForm = () => {
		loginForm.value.validate(async (v) => {
			if (v) {
				const flag = await login()
				if (!flag) {
					loginVerify()
				}
			} else {
				ElMessage({
					type: 'error',
					message: '请正确填写登录信息',
					showClose: true,
				})
				loginVerify()
				return false
			}
		})
	}

	// 跳转初始化
	const checkInit = async () => {
		const res = await checkDB()
		if (res.code === 0) {
			if (res.data?.needInit) {
				userStore.NeedInit()
				router.push({
					name: 'Init'
				})
			} else {
				ElMessage({
					type: 'info',
					message: '已配置数据库信息，无法初始化',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/newLogin.scss";
</style>
